<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
        }
        .box{
            width: 390px;
            height: 970px;
            display: flex;
            flex-direction: column;
        }
        .top{
            width: 390px;
            height: 40px;
            display: flex;
            background-color: #322e2e;
        }
        .x{
            width: 30px;
            background-image: url(https://oss.9ihub.com/test/dh5-close.png);
            background-position: 7px 9px;
            background-size: 60%;
            background-repeat: no-repeat;
        }
        .a1{
            width:250px;
            background-image: url(https://oss.9ihub.com/test/dh5-logo.png);
            background-repeat: no-repeat;
            background-position: 3px 5px;
            background-size: 10%;
            margin-top: 3px;
            margin-left: 10px;
        }
        .a1>span{
            font-size: 13px;
            color: white;
            position: relative;
            top: 5px;
            left: 40px;
        }
        .a2{
            background-color: rgb(242, 79, 79);
            color: white;
            width: 110px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .center{
            width: 390px;
            height: 310px;
            display: flex;
            background-color: rgb(195, 10, 11);
        }
        .search{
            width: 390px;
            height: 40px;
            
        }
        .s1{
            width: 390px;
            height: 40px;       
            background-color: rgb(195, 10, 11);
            background-image: url(https://oss.9ihub.com/test/dh5-list.png);
            background-repeat: no-repeat;
            background-position: 10px 12px;
            background-size: 5%;
            position: sticky;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .ssk{
            width: 260px;
            height: 30px;
            background-color: #fff;
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: -30px;
            background-image: url(https://oss.9ihub.com/test/dh5-left-jd.png);
            background-repeat: no-repeat;
            background-size: 8%;
            background-position: 8px 8px;
        }
        .gan{
            color: lightgray;
            position: relative;
            top: -2px;
            left: 3px;
        }
        .ss{
            width: 25px;
            height: 25px;
            background-image: url(https://oss.9ihub.com/test/dh5-jd-sprites.png);
            background-repeat: no-repeat;
            background-position: -148px 3px;
            background-size: 1000%;
        }
        .s1 input{
            border: none;
            margin-left: 8px;
        }
        .s1 span{
            color: white;
            position: relative;
            right: -45px;
            top: 0px;
        }
        .s2{
            width: 390px;
            height:150px;
            background-image: url(https://oss.9ihub.com/test/jdh5-banner.png);
            background-size: 100%;
            background-repeat: no-repeat;
        }
        .s3{
            height: 115px;
            margin-top: 5px;
            display: flex;
        }
        .ss1{
            width: 92px;
            height: 130px;
            background-image: url(https://oss.9ihub.com/test/dh5-nianhuo1.png);
            background-repeat: no-repeat;
            background-position: 5px 0;
            background-size: 95%;
        }
        .ss2{
            width: 200px;
            height: 130px;
            background-image: url(https://oss.9ihub.com/test/dh5-nianhuo2.png);
            background-repeat: no-repeat;
            background-position: 6px 0;
            background-size:95%;
        }
        .ss3{
            width: 92px;
            height: 130px;
            background-image: url(https://oss.9ihub.com/test/jdh5-nianhuo3.png);
            background-repeat: no-repeat;
            background-position: 3px 0;
            background-size: 95%;
        }
        .shop{
            width: 390px;
            height: 150px;
        }
        .one,.two{
            height: 60px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .d1{
            width:50px;
            height: 40px;
            background-image: url(https://oss.9ihub.com/test/dh5-nav1.png);
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 80%;
        }
        .d2{
            width:50px;
            height: 40px;
            background-image: url(https://oss.9ihub.com/test/dh5-nav2.png);
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 80%;
        }
        .d3{
            width:50px;
            height: 40px;
            background-image: url(https://oss.9ihub.com/test/dh5-nav3.png);
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 80%;
        }
        .d4{
            width:50px;
            height: 40px;
            background-image: url(https://oss.9ihub.com/test/dh5-nav4.png);
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 80%;
        }
        .d5{
            width:50px;
            height: 40px;
            background-image: url(https://oss.9ihub.com/test/dh5-nav5.png);
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 80%;
        }
        .d6{
            width:50px;
            height: 40px;
            background-image: url(https://oss.9ihub.com/test/dh5-nav6.png);
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 80%;
        }
        .d7{
            width:50px;
            height: 40px;
            background-image: url(https://oss.9ihub.com/test/dh5-nav7.png);
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 80%;
        }
        .d8{
            width:50px;
            height: 40px;
            background-image: url(https://oss.9ihub.com/test/dh5-nav8.png);
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 80%;
        }
        .d9{
            width:50px;
            height: 40px;
            background-image: url(https://oss.9ihub.com/test/dh5-nav9.png);
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 80%;
        }
        .d10{
            width:50px;
            height: 40px;
            background-image: url(https://oss.9ihub.com/test/dh5-nav10.png);
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 80%;
        }
        .jdcs{
            width: 50px;
            height:10px;
            font-size: 12px;
            color: rgb(170, 168, 168);
            position: relative;
            top: 40px;
        }
        .jdms{
            width: 390px;
            height: 130px;
            margin-top: 10px;
        }
        .j1{
            width: 390px;
            height: 20px;
            display: flex;
        }
        .ms,.gd{
            width:100px;
            font-weight: bold;
            position: relative;
            left: 5px;
        }
        .dc{
            width:20px;
            background-image: url(https://oss.9ihub.com/test/dh5-ms-dc.png);
            background-size:100%;
            background-repeat: no-repeat;
            margin-left: 5px;
        }
        .tt{
            width: 15px;
            background-image: url(https://oss.9ihub.com/test/dh5-ms-right.png);
            background-repeat: no-repeat;
            background-size: 100%;
            position: relative;
            top: 5px;
            right:-145px;
        }
        .j2{
            width: 390px;
            height: 100px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .ji1{
            width: 65px;
            height: 90px;
            background-image: url(https://oss.9ihub.com/test/jdh5-ms1.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .ji2{
            width: 65px;
            height: 90px;
            background-image: url(https://oss.9ihub.com/test/jdh5-ms2.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .ji3{
            width: 65px;
            height: 90px;
            background-image: url(https://oss.9ihub.com/test/jdh5-ms3.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .ji4{
            width: 65px;
            height: 90px;
            background-image: url(https://oss.9ihub.com/test/jdh5-ms4.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .ji5{
            width: 65px;
            height: 90px;
            background-image: url(https://oss.9ihub.com/test/jdh5-ms5.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .ji6{
            width: 65px;
            height: 90px;
            background-image: url(https://oss.9ihub.com/test/jdh5-ms6.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .money{
            width: 50px;
            height: 30px;
            color:red;
            font-size: 13px;
            position: relative;
            top: 65px;
            left: 15px;
        }
        .sp{
            width: 390px;
            height: 200px;
            display: flex;
            background-color: rgb(247, 247, 247);
        }
        .l1{
            width: 195px;  
            height: 195px;
            margin: 10px;
            background-image: url(https://oss.9ihub.com/test/jdh5-product1.webp);
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 100%;
        }
        .l2{
            width: 195px;
            height: 195px;
            margin: 10px;
            background-image: url(https://oss.9ihub.com/test/jdh5-product2.webp);
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 100%;
        }
        .banner{
            width: 390px;
            height: 80px;
            background-color: #8bd4e0;
            position: fixed;
            bottom: 0;
            z-index: 1000;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .ooo{
            color: lightgray;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top">
            <div class="x"></div>
            <div class="a1"><span>打开京东App，购物更轻松</span></div>
            <div class="a2">立即打开</div>
        </div>
        <div class="s1">
            <div class="ssk">
                <div class="gan">|</div>
                <div class="ss"></div>
                <input type="text" placeholder="键盘鼠标套餐">
            </div>
            <span>登录</span>
        </div>
        <div class="center">
            <div class="search">
                <div class="s2"></div>
                <div class="s3">
                    <div class="ss1"></div>
                    <div class="ss2"></div>
                    <div class="ss3"></div>
                </div>
            </div>
        </div>
        <div class="down">
            <div class="shop">
                <div class="one">
                    <div class="d1">
                        <div class="jdcs">京东超市</div>
                    </div>
                    <div class="d2">
                        <div class="jdcs">京东超市</div>
                    </div>
                    <div class="d3">
                        <div class="jdcs">京东超市</div>
                    </div>
                    <div class="d4">
                        <div class="jdcs">京东超市</div>
                    </div>
                    <div class="d5">
                        <div class="jdcs">京东超市</div>
                    </div>
                </div>
                <div class="two">
                    <div class="d6">
                        <div class="jdcs">京东超市</div>
                    </div>
                    <div class="d7">
                        <div class="jdcs">京东超市</div>
                    </div>
                    <div class="d8">
                        <div class="jdcs">京东超市</div>
                    </div>
                    <div class="d9">
                        <div class="jdcs">京东超市</div>
                    </div>
                    <div class="d10">
                        <div class="jdcs">京东超市</div>
                    </div>
                </div>
            </div>
            <div class="jdms">
                <div class="j1">
                    <div class="ms">京东秒杀&emsp;18</div>
                    <div class="dc"></div>
                    <div class="gd">更多秒杀</div>
                    <div class="tt"></div>         
                </div>
                <div class="j2">
                    <div class="ji1">
                        <div class="money">￥25</div>
                    </div>
                    <div class="ji2">
                        <div class="money">￥2568</div>
                    </div>
                    <div class="ji3">
                        <div class="money">￥28.8</div>
                    </div>
                    <div class="ji4">
                        <div class="money">￥19.7</div>
                    </div>
                    <div class="ji5">
                        <div class="money">￥420</div>
                    </div>
                    <div class="ji6">
                        <div class="money">￥42.9 </div>
                    </div>
                </div>
            </div>
            <div class="sp">
                <div class="l1"></div>
                <div class="l2"></div>
            </div>
        </div>
        <div class="banner">
            <div class="ooo">首页</div>
            <div class="ooo">分类</div>
            <div class="ooo">京喜</div>
            <div class="ooo">购物车</div>
            <div class="ooo">未登录</div>    
        </div>
    </div>
</body>
</html>